<template>
   <Page background="#15273E">
    <p-header title="Transaction History"/>
    <ScrollView>
      <StackLayout>
        <GridLayout class="tab-bar" columns="*, auto">
          <StackLayout col="0" orientation="horizontal">
            <StackLayout orientation="horizontal" v-for="(item, index) in sections" v-bind:key="index" :class="'tab-item' + tabClass(index)" @tap="tapOnItem(index)">
              <Label :text="item" verticalAlignment="center"/>
            </StackLayout>
          </StackLayout>
          <GridLayout v-if="shouldShowFilter" col="1" class="filter" columns="*, auto">
              <TextField col="0" class="filter-input" hint="BTC" v-model="filterInput"/> 
              <Image col="1" class="filter-icon" src="~/images/filter.png"/>
          </GridLayout>
        </GridLayout>
        <transaction v-for="(item, index) in displayList" :key="index" :transaction="item"/>
        <GridLayout v-if="displayList.length == 0" marginTop="100">
          <Image width="73" src="~/images/no-record.png"/>
        </GridLayout>
      </StackLayout>
    </ScrollView>
   </Page>
</template>

<script>
const platform = require("tns-core-modules/platform")
import Header from '~/components/common/Header'
import TransactionItem from '~/components/common/TransactionItem'
import {dataBus} from '~/business/DataBus'

export default {
  data() {
    return {
      currentTab: 0,
      shouldShowFilter: platform.isIOS,
      filterInput: '',
      sections: ['All', 'Receive', 'Send'],
      list: [],
    }
  },
  computed: {
    tabType() {
      if (this.currentTab == 0) {
        return 'all'
      } else if (this.currentTab == 1) {
        return 'deposit'
      } else if (this.currentTab == 2) {
        return 'withdraw'
      }
    },
    displayList() {
      return this.filterInput? this.list.filter(item => item.coin.toLowerCase().indexOf(this.filterInput.toLowerCase()) >= 0) : this.list
    }
  },
  components: {
    'p-header': Header,
    'transaction': TransactionItem
  },
  methods: {
    tabClass(tab) {
      return  this.currentTab == tab ? " active" : ""
    },
    tapOnItem(tab) {
      this.currentTab = tab
      this.loadData()
    },
    loadData() {
      const self = this
      dataBus.loadHistoryTransaction(this.tabType, {
        onSuccess: ret => {
          self.list = ret
        }
      })
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>


<style scoped>
.tab-bar {
    background: linear-gradient(to right, #0B84DE, #23B1D5);
    height: 50;
    padding-left: 13;
    padding-right: 13;
  }
  .tab-item {
    margin-right: 20;
    font-family: "PingFangSC-Medium";
    font-size: 16;
    color: white;
  }
  .active {
    color: #01ECF4;
    border-bottom-width: 1;
    border-bottom-color: #01ECF4;
  }
  .filter {
    border-width: 1;
    border-color: #0878CC;
    border-radius: 3;
    width: 98;
    height: 30;
    background: #1590C7;
    padding: 3;
  }
  TextField {
    color: white;
    height: 30;
    border: none;
  }
  .filter-icon {
    width: 19;
    height: 18;
  }
</style>

